<template>
    <div class="mapDiv" v-loading="loading">
      <!--地图-->
      <IndexMap v-if="completeRefreshData==true"
                    @getMap="getMap"
      ></IndexMap>
      <!--工具条控件-->
      <ControlToolBar v-if="completeRefreshData==true"
                      :map="map" :pageType="pageType"
                      @getClickLonLat="getClickLonLat"
      ></ControlToolBar>
      <!--超图图层显示-->
      <SuperMapLayer v-if="completeMapBool==true"
                      :map="map" :layerDataTypeList="layerDataTypeList"
                      :resetClearAllBool="resetClearAllBool"
                      :clickLonLat="clickLonLat"
      ></SuperMapLayer>
    </div>
  </template>
  
  <script setup>
  //地图
  import IndexMap from '@/map/activeFault/indexMap.vue';
  import ControlToolBar from '@/map/components/controlToolBar/map.vue';
  import SuperMapLayer from '@/map/components/superMapLayer/index.vue';
  
  const { proxy } = getCurrentInstance();
  const router = useRouter();
  const props = defineProps(['dataType','form']);
  const loading = ref(false);
  const pageType = ref("全国活动断层分布图");
  
  const data = reactive({
    //图层数据类别code和url列表
    layerDataTypeList:[
      /*{
        //建筑物确定评估--抗震能力-确定评估
        level2DataType:"buildingConfirm",//数据类别二级code
        level3DataType:"seismicEd",//数据类别三级code
        versionCode:null,//查询临时图层过滤条件
        show:false,//是否显示
        isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
        tifFileName:null,//tif文件名称
      },*/
    ],
  })
  const { layerDataTypeList } = toRefs(data)
  
  /*地图传参start*/
  const completeRefreshData = ref(false);//防止刷新后地图不显示
  const completeMapBool = ref(false);//是否完成加载地图
  //地图对象
  const map = ref(null);
  const getMap = (obj)=>{
    map.value = obj;
    completeMapBool.value = true;
  }
  const resetClearAllBool = ref(false);//是否清空全部超图图层
  //点击地图经纬度
  const clickLonLat = ref([]);
  //传递点击地图经纬度
  const getClickLonLat = (lonlat) =>{
    clickLonLat.value = lonlat;
  }
  /*地图传参end*/
  
  //根据类型显示超图图层
  function showLayerByDataType(type,form){
    if(type){
      let sqlFilter = "";
      if(sqlFilter){
        //
      }else{
        sqlFilter = "全部";
      }
      //设置图层数据版本
      setLayerVersion(type,sqlFilter);
    }
  }
  
  //设置图层数据
  function setLayerVersion(type,sqlFilter){
    let list = layerDataTypeList.value;
    for(let i=0;i<list.length;i++){
      if(list[i].level3DataType==type){
        list[i].versionCode = sqlFilter;
        list[i].show = true;
        break;
      }
    }
    console.log(list);
    layerDataTypeList.value = list;
  }
  
  //移除图层数据
  function removeLayerVersion(type){
    let list = layerDataTypeList.value;
    for(let i=0;i<list.length;i++){
      if(list[i].level3DataType==type){
        list[i].show = false;
        break;
      }
    }
    console.log(list);
    layerDataTypeList.value = list;
  }
  
  //获取查询参数
  const getFormParams = watch(() => props.form, value => {// watch函数监听props.form
    if(value.assessCode){
      let dataType = props.dataType;
      //根据类型显示超图图层
      showLayerByDataType(dataType,value);
    }
  },{immediate:true});
  
  onMounted(() => {
    completeRefreshData.value = true;
  })
  </script>
  
  <style scoped lang="scss">
  .mapDiv {
    position:absolute;top:0px;left:0px;width:100%;height:100%;
  }
  
  /*设置选择数据面板*/
  .new-settingDiv {
    position:absolute;top:18px;left:110px;width:400px;padding:20px;padding-top: 10px;
    background:rgba(0,27,67,0.7);border-radius:4px;color:white;
  }
  .new-settingDiv-div1{
    padding-bottom: 10px;
    border-bottom: 1px dashed white;
  }
  .new-settingDiv .new-p{
    margin-bottom: 10px;
    font-size:14px;
  }
  .new-settingDiv-div3{
    text-align: center;
  }
  :deep(.new-settingDiv .el-radio){
    color:white;
  }
  :deep(.new-settingDiv .el-checkbox){
    color:white;
  }
  :deep(.new-settingDiv .new-p .el-button){
    position:absolute;right:20px;
  }
  :deep(.new-settingDiv .el-select){
    width:208px;
  }
  .new-settingDiv-span {
    float: right;
    line-height: 32px;
    cursor:pointer;
  }
  .new-settingDiv-span:hover {
    cursor:pointer;
  }
  
  /*带三角弹窗*/
  .new-popover {
    position: absolute;
    top:0px;
    left:0px;
    padding:10px;
    background: rgba(0,27,67,0.8);
    color:white;
    z-index:100;
  }
  .new-triangle {
    position: absolute;
    top: 20px;
    left: -19px;
    overflow: hidden;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: dashed solid dashed dashed;
    border-color:transparent rgba(0,27,67,0.8) transparent transparent;
  }
  
  .new-pattenAnalysisDiv {
    position: absolute;top:246px;left:105px;font-size: 14px;
  }
  
  .new-pattenAnalysisDiv-button {
    float: left;
    width: 80px;
    text-align: center;
    padding: 5px;
    cursor:pointer;
  }
  /*规律分析按钮div*/
  .showPattenAnalysisDiv{
  
  }
  .showPattenAnalysisDiv img {
    width:25px;
    border:1px dashed white;
  }
  .showPattenAnalysisDiv-div1 {
    display: inline-block;width:160px;border-bottom: 1px dashed white;padding-bottom: 10px;
  }
  
  .new-div-selected {
    background: rgba(16,124,229,0.5);
    border: 1px solid #707070;
  }
  
  .areaDialog {
    text-align: center;
    .close {
      text-align: right;
      .el-icon {
        color: #606266;
        padding: 20px 0;
        margin-right: 10px;
        right: 0px;
        font-size: 22px;
      }
    }
    width: 320px;
    position: absolute;
    top: 246px;
    left: 288px;
    background: rgba($color: #fff, $alpha: 0.9);
  }
  
  .resultShowButton {
    position:absolute;
    top:20px;
    right:20px;
    width:50px;
    height:50px;
  }
  
  </style>